<template>
    <div class="graph-box">
        <div class="detail-box">
            <div class="left-box">
                <div class="left-content">
                    <div class="class-basic">
                        <img :src="courseDetail.coverImage" alt="">
                    </div>
                    <div class="basic-title">{{ courseDetail.courseName }}</div>
                    <div class="basic-tage">
                        <span class="orange">{{ courseDetail.courseType === 1 ? '必修课' : '选修课' }}</span>
                        <span class="blue">学时：{{ courseDetail.hours }}</span>
                        <span class="green">学分：{{ courseDetail.credits }}</span>
                    </div>
                    <div class="class-desc">
                        <div class="class-title">
                            <div class="left"></div>
                            <div class="right">课程简介</div>
                        </div>
                        <div class="desc" v-html="courseDetail.desc">
                        </div>
                    </div>
                    <div class="desc-table">
                        <div class="table-item">
                            <div class="left">学校/机构</div>
                            <div class="right">{{ courseDetail.school }}</div>
                        </div>
                        <div class="table-item">
                            <div class="left">课程类型</div>
                            <div class="right">{{ courseDetail.courseCategory }}</div>
                        </div>
                        <div class="table-item">
                            <div class="left">课程状态</div>
                            <div class="right">{{ courseDetail.publishStatus === 1 ? '已发布' : '未发布' }}</div>
                        </div>
                        <div class="table-item">
                            <div class="left">授课方式</div>
                            <div class="right">{{ courseDetail.teachingMode }}</div>
                        </div>
                        <div class="table-item">
                            <div class="left">前置课程</div>
                            <div class="right">{{ preCourseName }}</div>
                        </div>
                        <div class="table-item">
                            <div class="left">课程教师</div>
                            <div class="right">{{ courseDetail.teacher }}</div>
                        </div>
                    </div>
                    <div class="edit-btn">
                        <el-button type="primary" @click="editShow(0)">
                            <el-icon size="20">
                                <Edit />
                            </el-icon>
                            <span>编辑</span>
                        </el-button>
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div class="right-content">
                    <div class="right-class-box">
                        <div class="tops instructions">
                            <div class="class-title">
                                <div class="left"></div>
                                <div class="right">课程说明</div>
                            </div>
                            <div class="edit-btn">
                                <el-button type="primary" @click="editShow(1)">
                                    <el-icon size="20">
                                        <Edit />
                                    </el-icon>
                                    <span>编辑</span>
                                </el-button>
                            </div>
                        </div>
                        <div class="desc" v-html="courseDetail.courseDescription">
                        </div>
                    </div>
                    <div class="right-class-box">
                        <div class="tops">
                            <div class="class-title">
                                <div class="left"></div>
                                <div class="right">课程教师</div>
                            </div>
                        </div>
                        <div class="teacher-box">
                            <img :src="user.avatar" alt="">
                            <div class="user-box">
                                <span class="title">{{ user.name }} 教授</span>
                                <span class="sub-title">{{ user.desc }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="right-class-box">
                        <div class="tops instructions">
                            <div class="class-title">
                                <div class="left"></div>
                                <div class="right">课程背景</div>
                            </div>
                            <div class="edit-btn">
                                <el-button type="primary" @click="editShow(2)">
                                    <el-icon size="20">
                                        <Edit />
                                    </el-icon>
                                    <span>编辑</span>
                                </el-button>
                            </div>
                        </div>
                        <div class="desc" v-html="courseDetail.courseBackground">
                        </div>
                        <!-- <div class="nodata"> 暂无课程背景 </div> -->
                    </div>
                    <div class="right-class-box">
                        <div class="tops">
                            <div class="mubiao">
                                <div class="class-title">
                                    <div class="left"></div>
                                    <div class="right">课程目标</div>
                                </div>
                                <div class="edit-btn">
                                    <el-button type="primary" @click="addTarget">
                                        <el-icon size="20">
                                            <CirclePlus />
                                        </el-icon>
                                        <span>新建</span>
                                    </el-button>
                                </div>
                            </div>
                            <div class="desc-table">
                                <div class="table-item">
                                    <div class="tab-head">课程目标</div>
                                    <!-- <div class="tab-head">培养目标</div> -->
                                    <div class="tab-head">课程目标描述</div>
                                    <div class="tab-head">操作</div>
                                </div>
                                <div class="table-item" v-for="item in courseTargetList" :key="item.id">
                                    <div>{{ item.cultivateTarget }}</div>
                                    <!-- <div>{{ item.mubiao }}</div> -->
                                    <div class="desc">{{ item.targetDesc }}</div>
                                    <div class="operation">
                                        <el-link type="success" underline="false"
                                            @click="showUpdateTarge(item)">编辑</el-link>
                                        <div class="lines"></div>
                                        <el-link type="danger" underline="false"
                                            @click="deleTarge(item.id)">删除</el-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="nodata"> 暂无课程说明 </div> -->
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="editDialog" width="50%" top="5vh">
            <template #header>
                <div style="text-align: left;">
                    <span>{{ dialogTitle }}</span>
                </div>
            </template>
            <div class="dialog-content" v-if="basicShow">
                <div class="form-list">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程名称</div>
                            <div class="reds">*</div>
                        </div>
                        <div class="inputs">
                            <el-input v-model="courseDetail.courseName" placeholder="请输入主题" />
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程类型</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="courseDetail.courseType" class="m-2" placeholder="专业基础课">
                                <el-option v-for="item in courseTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">学时/学分</div>
                        </div>
                        <div class="inputs study">
                            <el-input v-model="courseDetail.hours" placeholder="请输入学时" />
                            <el-input v-model="courseDetail.credits" placeholder="请输入学分" />
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程封面</div>
                        </div>
                        <div class="inputs study">
                            <el-upload class="avatar-uploader" :http-request="uploadAvatar" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="courseDetail.coverImage" :src="courseDetail.coverImage" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <div class="form-list">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">所属专业</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="courseDetail.major" class="m-2" placeholder="请选择专业">
                                <el-option v-for="item in majorList" :key="item.id" :label="item.majorName"
                                    :value="item.id" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程结构</div>
                        </div>
                        <div class="inputs">
                            <el-select class="m-2" placeholder="章-节-知识点">
                                <el-option key="章-节-知识点" label="章-节-知识点" value="章-节-知识点" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">前置课程</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="courseDetail.preCourse" class="m-2" placeholder="请选择前置课程">
                                <el-option v-for="item in preCourseList" :key="item.id" :label="item.courseName"
                                    :value="item.id" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程性质</div>
                        </div>
                        <div class="class-switch">
                            <div class="slider"
                                :class="{ 'mode-1': courseDetail.courseType === 1, 'mode-2': courseDetail.courseType === 2 }"
                                :style="sliderStyleCourse"></div>
                            <div class="switch-item" :class="{ active: courseDetail.courseType === 1 }"
                                @click="courseDetail.courseType = 1">必修课
                            </div>
                            <div class="switch-item" :class="{ active: courseDetail.courseType === 2 }"
                                @click="courseDetail.courseType = 2">选修课
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">授课方式</div>
                        </div>
                        <div class="class-switch">
                            <div class="slider" :class="{ 'mode-1': teachMethod === 0, 'mode-2': teachMethod === 1 }"
                                :style="sliderStyleTeach"></div>
                            <div class="switch-item" :class="{ active: teachMethod === 0 }" @click="teachMethod = 0">
                                项目式教学
                            </div>
                            <div class="switch-item" :class="{ active: teachMethod === 1 }" @click="teachMethod = 1">
                                章节式教学
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="editor">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                    :mode="mode" />
                <Editor style="height: 200px;text-align: left;" v-model="courseDetail.desc"
                    :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" v-show="dialogType == 0" />
                <Editor style="height: 200px;text-align: left;" v-model="courseDetail.courseDescription"
                    :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" v-show="dialogType == 1" />
                <Editor style="height: 200px;text-align: left;" v-model="courseDetail.courseBackground"
                    :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" v-show="dialogType == 2" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialog = false"> 取消 </el-button>
                    <el-button type="primary" @click="apiUpdateCourse"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="addDialog" width="30%" top="25vh">
            <template #header>
                <div style="text-align: left;">
                    <span>{{ dialogTitle }}</span>
                </div>
            </template>
            <div class="add-dialog-content">
                <div class="add-form">
                    <div class="items">
                        <div class="text">课程目标</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="courseTarget.cultivateTarget" placeholder="请输入课程目标" />
                    </div>
                </div>
                <!-- <div class="add-form">
                    <div class="items">
                        <div class="text">培养要求</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="value" class="m-2" placeholder="请选择培养要求">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div> -->
                <div class="add-form">
                    <div class="items">
                        <div class="text">课程目标描述</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="courseTarget.targetDesc" placeholder="请输入课程目标描述" />
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialog = false"> 取消 </el-button>
                    <el-button type="primary" @click="apiCourseAddCourseTarget" v-if="dialogTitle === '新增课程目标'"> 保存
                    </el-button>
                    <el-button type="primary" @click="updateTarge" v-if="dialogTitle === '编辑课程目标'"> 保存 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, onBeforeUnmount, ref, shallowRef, defineProps, onMounted } from 'vue'
import { Edit, CirclePlus, Plus } from '@element-plus/icons-vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api/index'
const props = defineProps(['id']);
const teachMethod = ref(0)
const editDialog = ref(false)
const addDialog = ref(false)
const basicShow = ref(true)
const dialogTitle = ref('新增课程目标')
const courseDetail = ref({ courseType: 1 })
const courseTypeOptions = [{ value: 1, label: '必修课', }, { value: 2, label: '选修课' }]
const majorList = ref([])
const preCourseList = ref([])
const dialogType = ref(0)
const courseTargetList = ref([])
const courseTarget = ref({})
const user = JSON.parse(localStorage.getItem("user"))
const apiCourseDetail = async () => {
    let res = await api.course_detail({ id: props.id })
    courseDetail.value = res.data
    if (courseDetail.value.major) {
        courseDetail.value.major = Number(courseDetail.value.major)
    }
    if (courseDetail.value.preCourse) {
        courseDetail.value.preCourse = Number(courseDetail.value.preCourse)
    }
    courseDetail.value.desc = courseDetail.value.desc ? courseDetail.value.desc : ""
}

const uploadAvatar = async (options) => {
    const { file } = options;
    const formData = new FormData();
    formData.append('avatar', file);
    const res = await api.uploadAvatar(formData);
    courseDetail.value.coverImage = process.env.VUE_APP_BASE_HOST + res.data
}
const apiMajorList = async () => {
    let res = await api.major_page({ pageNum: 1, pageSize: 10000 })
    majorList.value = res.list
}


const apiPreCourseList = async () => {
    let res = await api.course_page({ pageNum: 1, pageSize: 10000 })
    preCourseList.value = res.list
}
apiPreCourseList()

const apiUpdateCourse = async () => {
    let res = await api.course_update(courseDetail.value)
    if (res.code === -1) {
        ElMessage.error(res.data)
        return
    }
    editDialog.value = false
    apiCourseDetail()
}

const preCourseName = computed(() => {
    const preId = courseDetail.value.preCourse;
    if (preId == null) return ''; // null, undefined 都处理
    const match = preCourseList.value.find(item => item.id === preId);
    return match ? match.courseName : '未知专业';
});

const apiCourseTargetList = async () => {
    let res = await api.course_courseTargetList({ courseId: props.id })
    courseTargetList.value = res.data
}

const apiCourseAddCourseTarget = async () => {
    let res = await api.course_addCourseTarget({ courseId: props.id, ...courseTarget.value })
    if (res.code === -1) {
        ElMessage.error(res.data)
        return
    }
    addDialog.value = false
    ElMessage.success('添加成功')
    apiCourseTargetList()
}
onMounted(() => {
    apiCourseDetail();
    apiMajorList();
    apiCourseTargetList()
});
const editorRef = shallowRef();

const toolbarConfig = {
    excludeKeys: ["uploadVideo", "fullScreen"],
};
const editorConfig = ref({
    placeholder: "请输入内容详情...",
    MENU_CONF: {}
});
const handleCreated = (editor) => {
    editorRef.value = editor;
};
onBeforeUnmount(() => {
    if (!editorRef.value) return;
    editorRef.value.destroy();
});

const editShow = (attr) => {
    dialogType.value = attr;
    editDialog.value = true;
    if (attr == 0) {
        dialogTitle.value = '编辑课程简介'
        basicShow.value = true;
    } else if (attr == 1) {
        dialogTitle.value = '编辑课程说明'
        basicShow.value = false;
    } else if (attr == 2) {
        dialogTitle.value = '编辑课程背景'
        basicShow.value = false;
    }
}

const addTarget = () => {
    dialogTitle.value = '新增课程目标'
    addDialog.value = true;
    courseTarget.value = {}
}

const deleTarge = (id) => {
    ElMessageBox.confirm('确定永久删除该数据?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(async() => {
        ElMessage({ type: 'success', message: '删除完成', })
        let res = await api.course_delCourseTarget({ id })
        if (res.code === -1) {
            ElMessage.error(res.data)
            return
        }
        ElMessage.success('删除成功')
        apiCourseTargetList()
    }).catch(() => {
        ElMessage({ type: 'info', message: '取消删除', })
    })
}

const showUpdateTarge = (item) => {
    dialogTitle.value = '编辑课程目标'
    addDialog.value = true;
    courseTarget.value = item
}

const updateTarge = async () => {
    let { id, cultivateTarget, targetDesc } = courseTarget.value
    let updateParams = { id, cultivateTarget, targetDesc };
    let res = await api.course_updateCourseTarget(updateParams)
    if (res.code === -1) {
        ElMessage.error(res.data)
        return
    }
    addDialog.value = false
    ElMessage.success('更新成功')
    apiCourseTargetList()
};

const sliderStyleCourse = computed(() => ({
    width: `50%`,
    transform: `translateX(${(courseDetail.value.courseType - 1) * 100}%)`
}));
const sliderStyleTeach = computed(() => ({
    width: `50%`,
    transform: `translateX(${teachMethod.value * 100}%)`
}));
</script>
<style>
* {
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100vh;
    width: 100%;
    background: #F0F4FB;
}
</style>
<style scoped>
:deep(.el-dialog__header) {
    padding-bottom: 0;
}

.detail-box {
    width: 100%;
    background: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: row;
}

.left-box {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    max-width: 450px;
    max-height: 880px;
    border-radius: 20px;
    margin-left: 30px;
    padding: 0 30px 30px 20px;
}

.left-box .class-basic {
    padding-top: 30px;
}

.blue {
    color: #3869E7;
    border: 1px solid #3869E7;
    background: rgba(56, 105, 231, 0.2);
}

.green {
    color: #217F10;
    border: 1px solid #5ACA45;
    background: rgba(90, 202, 69, 0.2);
}

.orange {
    color: #E2B17B;
    border: 1px solid #E2B17B;
    background: rgba(226, 177, 123, 0.1);
}

.left-content {
    width: 380px;
    margin: 0 auto;
}

.left-box .class-basic img {
    width: 100%;
}

.basic-title {
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
}

.basic-tage {
    display: flex;
    flex-direction: row;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    justify-content: center;
    margin-top: 10px;
}

.basic-tage span {
    display: block;
    font-size: 14px;
    border-radius: 5px;
    width: 60px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-left: 20px;
    padding: 0 10px 0 10px;
}

.class-desc {
    max-width: 380px;
    max-height: 150px;
    background: #F4F8FE;
    margin: 20px auto;
    border-radius: 5px;
    padding-bottom: 20px;
}

.class-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.left-box .class-title {
    padding-top: 10px;
}

.class-title .left {
    height: 15px;
    width: 5px;
    background: #0457D5;
    border-radius: 5px;
    margin-left: 15px;
}

.class-title .right {
    margin-left: 5px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 16px;
    font-weight: 600;
}

.class-desc .desc {
    max-width: 350px;
    text-align: left;
    margin-left: 15px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
    margin-top: 10px;
}

.desc-table {
    padding-bottom: 20px;
}

.desc-table .table-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0px 10px 0px;
}

.desc-table .table-item:nth-child(odd) {
    background-color: #E9F0FD;
}

.desc-table .table-item:nth-child(even) {
    background-color: #F4F8FE;
}

.desc-table .table-item:hover {
    background-color: #e6f7ff;
    transition: background-color 0.3s ease;
}

.desc-table .table-item .left {
    margin-left: 10px;
}

.desc-table .table-item .right {
    margin-right: 10px;
}

.left-box .edit-btn {
    width: 150px;
    margin: 0 auto;
}

.right-box {
    margin-left: 40px;
    width: 75%;
}

.right-box .right-content {
    width: 100%;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.right-class-box {
    width: 100%;
    border: 1px solid #D9D9DF;
    border-radius: 10px;
    padding: 10px;
}

.mubiao {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.right-class-box .desc {
    margin: 10px;
    text-align: left;
    font-size: 14px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    color: #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.right-class-box .edit-btn {
    margin-right: 20px;
    width: 100px;
}

.right-class-box .desc-table {
    margin-left: 10px;
    margin-top: 20px;
    width: calc(100% - 30px);
}

.right-class-box .desc-table .table-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.right-class-box .desc-table .table-item .tab-head {
    font-weight: 600;
}

.right-class-box .desc-table .table-item div {
    text-align: center;
    width: 25%;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
    color: #000;
    font-weight: 400;
}

.right-class-box .desc-table .table-item .desc {
    text-align: left;
}

.right-class-box .desc-table .table-item .operation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.right-class-box .desc-table .table-item .operation .lines {
    width: 1px;
    background: #D5D9EC;
    height: 15px;
    margin: 0 20px 0 20px;
}

.instructions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.teacher-box {
    height: 150px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.teacher-box img {
    width: 80px;
    height: 80px;
}

.teacher-box .user-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 10px;
}

.teacher-box .user-box .title {
    font-size: 20px;
    font-weight: 600;
    color: #1D173E;
}

.teacher-box .user-box .sub-title {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}

.right-class-box .nodata {
    color: #9397A5;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    margin-left: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.dialog-content {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.dialog-content .form-list {
    width: 48%;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.dialog-content .form-list {
    display: flex;
    flex-direction: column;
}

.dialog-content .form-list .form-item {
    margin-top: 20px;
}

.dialog-content .form-list .form-item .items {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dialog-content .form-list .form-item .items .text {
    font-size: 14px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
}

.dialog-content .form-list .form-item .items .reds {
    color: red;
    margin-left: 5px;
}

.dialog-content .form-list .form-item .inputs {
    margin-top: 10px;
}

.dialog-content .form-list .form-item .study {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.class-switch {
    position: relative;
}

.class-switch .switch-item {
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    text-align: center;
    color: #7f8c8d;
    z-index: 2;
}

.slider {
    border-radius: 35px;
    height: 35px;
    background: #3869E7;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    position: absolute;
    top: 0;
}

.switch-item.active {
    color: white;
}

.mode-1 {
    background: #1465E1;
}

.mode-2 {
    background: #1465E1;
}

.form-item .class-switch {
    display: flex;
    flex-direction: row;
    width: 40%;
    background: #F7F7F7;
    border-radius: 40px;
    margin-top: 10px;
}

.form-item .class-switch .switch-item {
    width: 50%;
    height: 35px;
    line-height: 35px;
}

.course-nature .editor {
    margin-top: 20px;
}

.add-dialog-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.add-dialog-content .add-form {
    width: calc(100% - 30px);
    margin: 10px auto;
}

.add-form .items {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.add-form .items .reds {
    color: red;
}

.add-form .inputs {
    margin-top: 10px;
}

@media (max-width: 1920px) {
    .right-box {
        margin-left: 30px;
        width: 65%;
    }
}
</style>